<template>
  <view class="content">
    <view class="components-title">
      <view class="components-title-t">gg-checkbox</view>
      <view class="components-title-d">多选</view>
    </view>
    <gg-nav-group>
      <gg-checkbox label="多选" v-model="formData.checkbox" :dataLists="checkLists" />
    </gg-nav-group>
    <gg-nav-group label="最多选中三个">
      <gg-checkbox label="多选" v-model="formData.checkbox" :dataLists="checkLists" max-number="3" />
    </gg-nav-group>
    <gg-nav-group label="有默认选项">
      <gg-checkbox label="多选" v-model="formData.checkbox1" :dataLists="checkLists" max-number="3" />
    </gg-nav-group>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        checkbox: [],
        checkbox1: ['1', '3'],
      },
      checkLists: [
        { value: '0', text: '橘子' },
        { value: '1', text: '柠檬' },
        { value: '2', text: '香蕉' },
        { value: '3', text: '苹果' },
        { value: '4', text: '榴莲' },
      ],
    };
  },
  onLoad() { },
  methods: {
    bindTimeChange(e) {

    },
    clickTest(e) {
      console.log(this.formData.checkbox)
    }
  }
}
</script>

<style>
page {
  background: #f1f1f1;
}
</style>
